<template>
  <el-dialog :title="operationName+typeName" :visible.sync="showDialog_" custom-class='dialog_right MkAddSite' top="0%" @close='closeDialog("addForm")' @open='openDialog'>
    <el-form :model="addForm.formItem"  ref="addForm" label-width="80px">
      <input type="text" style="display:none" />
      <el-form-item :label="typeName+'名称'" prop='name' :rules="[{required:true,message:'请输入'+typeName+'名称',trigger:'change'},{max:15,message:'最多输入15个字符',trigger:'change'}]" >
        <el-input v-model="addForm.formItem.name" :placeholder='"请输入"+typeName+"名称（必填）"'  @change="changeField('addForm','addForm','name')" size="" :maxlength=15></el-input>
      </el-form-item>
      <el-form-item label="是否显示" prop='status'>
        <el-radio-group v-model="addForm.formItem.status">
          <el-radio label="ENABLE">是</el-radio>
          <el-radio label="DISABLE">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer footerStyle">
      <el-button type="primary" class='btn-primary' :disabled="isSubmitBtnDisabled" @click='submitForm("addForm")' v-loading.fullscreen.lock="fullscreenLoading">保存</el-button>
      <el-button type='primary' class='btn-cancel' @click="showDialog_ = false" size=''>取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import siteService from '../../services/site'
export default {
  name: 'MkAddSite',
  components: {

  },
  props: ['showDialog', 'currentObj','currentParentId','currentSiteLevel'],
  computed: {
  },
  methods: {
    changeField(form, formName, field) {
      this[form].formItem[field] = this[form].formItem[field].trim();
      this.$refs[formName].validateField(field);
    },
    closeDialog(formName) {
      this.$refs[formName].resetFields();
      this.$emit('closeDialog', this.isRefresh);
      var form = this.addForm.formItem;
      form.name = '';
      form.status = 'ENABLE';
      form.parentId = '';
      form.id = '';
    },
    openDialog() {
      this.isRefresh = 'no';
      this.isSubmitBtnDisabled = false;
      //默认不显示
      this.addForm.formItem.status="DISABLE";
      if(this.currentSiteLevel) {
        this.operationName = '添加';
        if (this.currentSiteLevel == 'COUNTRY') {
          this.typeName = '地区';
        } else {
          this.typeName = '站点';
        }
      }

      if (this.currentObj) {
        this.operationName = '编辑';
        var form = this.addForm.formItem;
        var currentObj = this.currentObj;
        if(currentObj.siteLevel == 'AREA' || currentObj.siteLevel == 'COUNTRY'){
            this.typeName = '地区';
        }else if(currentObj.siteLevel == 'SITE') {
            this.typeName = '站点';
        }

        form.name = currentObj.name;
        form.status = currentObj.status;
        form.id = currentObj.id;
      }

    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

          let form = this.addForm.formItem;

          this.fullscreenLoading = true;
          this.isSubmitBtnDisabled = true;
          if (this.currentObj) {
            siteService.editSiteServer(form, (data) => {
              this.$message.success( '编辑成功');
              this.isRefresh = 'yes';
              this.showDialog_ = false;
              this.fullscreenLoading = false;
            }, (data) => {
              this.fullscreenLoading = false;
              this.isSubmitBtnDisabled = false;
            })
          } else {
            form.parentId = this.currentParentId;
            siteService.addSiteServer(form, (data) => {
              this.$message.success('添加成功');
              this.isRefresh = 'yes';
              this.showDialog_ = false;
              this.fullscreenLoading = false;
            }, (data) => {
              this.fullscreenLoading = false;
              this.isSubmitBtnDisabled = false;
            })
          }
        }
      })
    }
  },
  watch: {
    showDialog: function(value) {
      this.showDialog_ = value;
    }
  },
  data() {
    return {
      typeName: '',
      operationName: '',
      isSubmitBtnDisabled: false,
      fullscreenLoading: false,
      isRefresh: 'no',
      showDialog_: this.showDialog,
      addForm: {
        formItem: {
          name: '',
          status: 'ENABLE',

          parentId: '',//添加用到

          id: ''//编辑用到
        }
      }

    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
@import '../../assets/style/main.less';
.MkAddSite {
}
</style>
